<template>
    <view class="content-container">
        <textarea :value="content" @input="$emit('update:content',$event.detail.value)"></textarea>
        <view class="words-container">
            <span>当前字数：{{content.length}}</span>
        </view>
    </view>
</template>

<script setup>
    import {computed, onMounted, ref,watch} from 'vue'
    const props=defineProps({
        content:String
    })
    const emit=defineEmits(['update:content'])
</script>

<style lang="scss" scoped>
    @import '@/static/css/common.scss';
    .content-container{
                    @extend .column-container-layout;
                    border-radius: 10px;
                    padding:15px;
                    background-color: white;
                    textarea{
                        width: 100%;
                        flex: 1;
                        font-size: 16px;
                    }
                    .words-container{
                        @extend .row-layout;
                        justify-content: flex-end;
                        margin-top: 15px;
                        span{
                            font-size: 10px;
                            color: #AAAAAA;
                        }
                    }
                }
</style>